<!DOCTYPE html>
<html>
<head>
<style>
.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
}

.button:hover {
  background-color: red;
}

.button:active {
  background-color: green;
}

@media screen and (max-width: 600px) {
  .button {
    font-size: 12px;
  }
}
</style>
</head>
<body>

<button class="button">Hover and Click me</button>

</body>
</html>
